<template>
    <div>
        <el-row>
            <el-col>
                <el-form label-width="120px" :model="FinanceLoanDB" :rules="rules" ref="FinanceLoanDBref">
                    <el-row>
                        <el-col :offset="2" :span="9">
                            <el-form-item label="类别" prop="FinanceType">
                                <el-select width="100%" v-model="FinanceLoanDB.FinanceType" filterable
                                           @change="FinanceTypeNumber" placeholder="请选择类型" style="width:100%">
                                    <el-option label="全部" :value="0"></el-option>
                                    <el-option label="个人借款" :value="1"></el-option>
                                    <el-option label="支付申请" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :offset="2" :span="9">
                            <el-form-item label="申请人" prop="Borrower">
                                <el-select width="100%" v-model="FinanceLoanDB.Borrower" filterable placeholder="请选择申请人"
                                           style="width:100%">
                                    <el-option value="">请选择请款人</el-option>
                                    <el-option value=" ">全部</el-option>
                                    <el-option v-for="(v,k) in AllUsers" :value="v.Id" :data-userid="v.Id"
                                               :label="v.UserName" v-text="v.UserName"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :offset="2" :span="9">
                            <el-form-item label="部门" prop="Department">
                                <el-select v-model="FinanceLoanDB.Department" filterable placeholder="请选择部门"
                                           style="width:100%">
                                    <el-option value="">请选择部门</el-option>
                                    <el-option value=" ">全部</el-option>
                                    <el-option v-for="(v,k) in AllDepartment" :value="v.Id" :data-userid="v.Id"
                                               :label="v.DepartmentName" v-text="v.DepartmentName"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :offset="2" :span="9">
                            <el-form-item label="项目" prop="Project">
                                <el-select v-model="FinanceLoanDB.Project" filterable placeholder="请选择项目"
                                           style="width: 100%">
                                    <el-option value="">请选择项目</el-option>
                                    <el-option value=" ">全部</el-option>
                                    <el-option v-for="(v,k) in AllProject" :value="v.Id" :data-userid="v.Id"
                                               :label="v.ProjectName" v-text="v.ProjectName"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :offset="2" :span="9">
                            <el-form-item label="收款人" prop="editPayeeArray">
                                <el-cascader v-model="editPayeeArray"
                                             placeholder="收款人"
                                             :options="GetPayArray"
                                             filterable></el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :offset="2" :span="9">
                            <el-form-item label="金额" prop="Money">
                                <el-input v-model="FinanceLoanDB.Money" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="20" :offset="2">
                            <el-form-item label="明细">
                                <el-table :data="detailed"
                                          border
                                          style="width: 100%;">
                                    <el-table-column prop="CategoryOne"
                                                     label="分类一"
                                                     header-align="center"
                                                     align="center"
                                                     style="width: 100%;text-align:center;padding:0px">
                                        <template slot-scope="scope">
                                            <label>{{GetNameById(scope.row.CategoryOne)}}</label>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="CategoryTwo"
                                                     label="分类二"
                                                     header-align="center"
                                                     align="center"
                                                     style="width: 100%;text-align:center;padding:0px">
                                        <template slot-scope="scope">
                                            <label>{{GetNameById(scope.row.CategoryTwo)}}</label>
                                        </template>

                                    </el-table-column>
                                    <el-table-column prop="Money"
                                                     header-align="center"
                                                     align="center"
                                                     label="金额"
                                                     style="width: 100%;text-align:center;padding:0px">
                                    </el-table-column>
                                    <el-table-column prop="Purpose"
                                                     header-align="center"
                                                     align="center"
                                                     label="用途"
                                                     style="width: 100%;text-align:center;padding:0px">
                                    </el-table-column>
                                    <el-table-column prop="address"
                                                     header-align="center"
                                                     label="操作"
                                                     align="center"
                                                     width="200px"
                                                     style=" text-align:center;padding:0px">
                                        <template slot-scope="scope">
                                            <el-button type="success" class="BtnSize" size="mini"
                                                       @click="GetFinance(scope.row)" plain>修改
                                            </el-button>
                                            <el-button type="danger" class="BtnSize" size="mini"
                                                       @click="DelAddLoandetails(scope.row,scope.$index)" plain>删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="20" :offset="2">
                            <el-form-item label="已有票据" :style="objcss" prop="HasInvoice">
                                <el-checkbox v-model="form.HasInvoice" label="已有票据，自动冲账" border
                                             size="medium"></el-checkbox>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="20" :offset="2">
                            <el-form-item label="备注" prop="Remark">
                                <el-input v-model="FinanceLoanDB.Remark"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="20" :offset="2">
                            <el-form-item label="图片上传" prop="uploadimg">
                                <upload-file ref="upload_file_refs"
                                             style="display: inline-block;margin-right: 10px;display: block"
                                             content="图片选择"
                                             list_type="picture-card"
                                             btnsize=""
                                             :another-data="AnotherData"
                                             :showfilelist="true"
                                ></upload-file>

                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" style="text-align: center">
                        <input type="hidden" id="Id"/>
                        <el-button type="primary" @click="AddFinanceLoandetailsShow_event">添加明细</el-button>
                        <el-button type="success" @click="SaveFinanceLoan()">确定</el-button>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
        <div>
            <el-dialog :visible.sync="AddFinanceLoandetailsShow" width="60%" title="新建单据明细" :append-to-body="true">
                <AddFinanceLoandetails></AddFinanceLoandetails>
            </el-dialog>

            <el-dialog :visible.sync="UpFinanceLoandetailsShow" width="60%" title="修改单据明细" :append-to-body="true">
                <UpFinanceLoandetails :form="form"></UpFinanceLoandetails>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    //import { IsExist } from "/public/Scriput/IsExist"
    import UploadFile from "../../UploadFile";
    import AddFinanceLoandetails from "./FinanceLoandetails/AddFinanceLoandetails"
    import UpFinanceLoandetails from "./FinanceLoandetails/UpFinanceLoandetails"


    export default {
        name: "FinanceLoanmultiplex",
        components: {
            'AddFinanceLoandetails': AddFinanceLoandetails,
            'UpFinanceLoandetails': UpFinanceLoandetails,
            "upload-file": UploadFile,

        },
        props: {
            GetPayArray: {
                type: Array,
                required: true
            },
            AllUsers: {
                type: Array,
                required: true
            },
            AllProject: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            AllCategory: {
                type: Array,
                required: true
            },
            FinanceLoanDB: {
                type: Object,
                required: true
            },
            editPayee: {
                type: Array,
                required: true
            },
        },
        data() {
            return {
                editPayeeArray: [],
                AddFinanceLoandetailsShow: false,
                UpFinanceLoandetailsShow: false,
                src: '',
                bInt: 0,
                detailed: [],
                form: {
                    Purpose: "",
                    Money: '',
                    CategoryTwo: '',
                    CategoryOne: '',
                    CategoryOneName: '',
                    CategoryTwoName: '',
                    HasInvoice: false,
                },
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                //文件上传参数
                AnotherData: {
                    FileType: 256,
                    id: 1,
                    Type: 0,
                    Single: false,
                },
                rules: {
                    Borrower: [
                        {required: true, message: '请选择请款人', trigger: 'change'},
                    ],
                },
                objcss: {
                },
            }
        },
        watch: {
            FinanceLoanDB: function (val) {
                this.GetdetailedDB();
            },
        },
        created() {
            this.editPayeeArray = this.editPayee;
            this.GetdetailedDB();
            this.objcss.display = this.FinanceLoanDB.FinanceType==1?"none":"block";
            this.form.HasInvoice = this.FinanceLoanDB.HasInvoice;
        },
        methods: {
            GetNameById(id) {
                for (var i = 0; i < this.AllCategory.length; i++) {
                    let Id = parseInt(id)
                    if (Id == this.AllCategory[i].Id) {
                        return this.AllCategory[i].CategoryName;
                    }
                }
            },
            AddFinanceLoandetailsShow_event() {
                this.AddFinanceLoandetailsShow = true;
            },
            _GetAddAllMoney() {
                let sum = 0;
                for (var i = 0; i < this.detailed.length; i++) {
                    sum += parseFloat(this.detailed[i].Money);
                }
                this.FinanceLoanDB.Money = sum;
            },
            GetdetailedDB() {
                if (this.FinanceLoanDB.TransferMethod == 2) {
                    this.Two_ServiceCharge = true
                } else {
                    this.Two_ServiceCharge = false
                }
                if (this.FinanceLoanDB.LoanNumber != '') {
                    this.$http.get("/Finance/GetfinanceDocDetails?Number=" + this.FinanceLoanDB.LoanNumber + '&type=1').then(list => {
                        this.detailed = [];
                        if (list.data.length > 0) {
                            this.detailed = list.data;
                        }
                    });
                } else {
                    this.detailed = [];
                }
            },
            DelAddLoandetails(row, index) {
                this.detailed.splice(index, 1)
                this._GetAddAllMoney();
            },
            GetFinance(row) {
                console.log(row)
                this.form = row;
                this.UpFinanceLoandetailsShow = true;
            },

            SaveFinanceLoan() {
                this.$refs["FinanceLoanDBref"].validate((valid) => {
                    if (valid) {
                        this.FinanceLoanDB.PayeeType = this.editPayeeArray[0];
                        this.FinanceLoanDB.Payee = this.editPayeeArray[1];
                        //finance.PayeeType = this.PayeeType
                        var financeDocDetails = this.DeleteNullArr(this.detailed);
                        var _this = this;
                        let loadding = this.openLoading();
                        this.$http.post("/Finance/AddFinanceLoan", {
                            finance: this.FinanceLoanDB,
                            financeDocDetails: financeDocDetails,
                            HasInvoice: this.form.HasInvoice,
                            IsSubmit: true,
                        }).then(list => {
                            loadding.close();
                            var result = list.data
                            if (result.bit) {
                                if (this.$refs['upload_file_refs'].fileList.length > 0) {
                                    this.AnotherData.id = result.id;
                                    this.$refs['upload_file_refs'].submitUpload()
                                }
                                this.$message.success("借款单再付成功");
                                this.$refs['FinanceLoanDBref'].resetFields()
                                _this.$parent.$parent.multiplexData = {
                                    show: false,
                                    data: {},
                                    title: ""
                                };
                                this.detailed = [];
                                this.editPayeeArray = [];
                                _this.$parent.$parent._GetFinanceLoanDetail();
                            } else {
                                this.$message.error("添加失败");
                            }
                        });
                    }
                })
            },
            Changepayee(obj) {
                console.log(obj)
            },
            //去掉空数组
            DeleteNullArr(data) {
                var arr = [];
                for (var i = 0; i < data.length; i++) {
                    if (data[i].length != 0) {
                        if (data[i].CategoryTwo == "") {
                            data[i].CategoryTwo = 0;
                        }
                        arr.push(data[i]);
                    }
                }
                return arr;
            },

            FinanceTypeNumber(val) {
                if (val == 1) {
                    this.objcss.display = "none";
                } else {
                    this.objcss.display = "block";
                }
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                console.log(file);
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            }
        },
    }
</script>

<style scoped>
    .el-table th {
        padding: 0px;
    }

    .el-select-dropdown__item {
        width: 270px !important;
    }
</style>
